<template>
  
  
  <div class="register">
    
    <h1>Create</h1>
    <h2>your account</h2>
    <span @click="back" style="box-shadow: 0 1px rgba(255,255,255,.5), 0 8px 13px rgba(0,0,0,.15) inset; color: #14b1ab;font-size: 13px;padding: 5px;border-radius: 100px;">返回上一页</span>


    <van-form ref="form" class="registerGroup">
      <div class="van-cell-group">
        <!-- <van-cell-group> -->
        <van-field v-model="form.user" name="user" :rules="userRules" label="用户名" placeholder="用户名" />

        <van-field v-model="form.name" name="name" :rules="nameRules" label="昵称" placeholder="昵称" />

        <van-field v-model="form.phone" name="tel" :rules="telRules" type="tel" label="手机号" placeholder="手机号" />


        <van-field v-model="form.email" name="email" :rules="emailRules" label="邮箱" placeholder="邮箱" />


        <van-field v-model="form.pwd" name="password" :rules="pwdRules" type="password" label="密码"
          placeholder="密码" />

        <van-field v-model="form.repwd" name="password" :rules="repwdRules" type="password" label="确认密码"
          placeholder="确认密码" />
        <!-- </van-cell-group> -->
      </div>
      <van-button class="registerBtn" round block native-type="submit" @click="submit">提交</van-button>
    </van-form>

  </div>
</template>

<script>
import httpApi from '@/http'
import { mapMutations } from 'vuex'

export default {
  data() {
    return {
      form: {
        user: '',
        name: '',
        phone: '',
        email: '',
        pwd: '',
        repwd: '',
      },
      // 增加用户名 手机号码 密码字段的正则验证
      userRules: [
        {
          validator: value => {
            return /^\w{3,15}$/.test(value)
          },
          message: '请输入3-15个字符',
          trigger: 'onBlur'
        }
      ],
      // 昵称设为必填项
      nameRules: [
        {
          required: true,
          message: '昵称为必填项',
          trigger: 'onBlur'
        }
      ],
      telRules: [
        {
          validator: value => {
            return /^1[3-9]\d{9}$/.test(value)
          },
          message: '请输入正确的手机号码',
          trigger: 'onBlur'
        }
      ],
      pwdRules: [
        {
          validator: value => {
            return /^\w{6,15}$/.test(value)
          },
          message: '请输入6-15个字符',
          trigger: 'onBlur'
        }
      ],
      //邮箱设置正则
      emailRules: [
        {
          validator: value => {
            return /^\w+@[0-9a-zA-Z]+\.[a-zA-Z]+/.test(value)
          },
          message: '请输入正确的邮箱格式',
          trigger: 'onBlur'
        }
      ],
      //确认密码设为必填项
      repwdRules: [
        {
          required: true,
          message: '确认密码不能为空',
          trigger: 'onBlur'
        }
      ],

    }
  },
 
  methods: {
    back(){
      this.$router.push('/about')
    },


    submit() {
      this.$refs.form.validate().then(() => {
        this.$toast.success('提交成功')
        httpApi.userApi.registerApi(this.form).then(res => {
          console.log('注册表单信息', res);
          console.log(this.form);
         // 如果注册成功 
          if(res.data.code == 200){

            //跳转到登录界面
            this.$router.push('/login')
          }else if(res.data.code == 500){
            this.$toast.fail('手机号或账号已经被注册!!')
          }
          
        })

      }).catch(() => {
        this.$toast.fail('提交失败')
      })
    }
  },

}
</script>

<style lang="scss">
.register {
  width: 100%;
  height: 800px;
  background-color: #213B3F;
  display: flex;
  flex-direction: column;
  align-items: center;
  

  h1 {
    margin-top: 20px;
  }

  h2 {
    margin-bottom: 10px;
  }


  .registerGroup {
    >.van-cell-group {
      background-color: #213B3F;


      >.van-field {
        border-radius: 100px;
        margin: 30px 0;
        width: 280px;
        background-color: transparent;

        input {
          color: aliceblue;
        }

      }

    }

    >.registerBtn {
      width: 270px;
      height: 50px;
      border-radius: 100px;
      background: linear-gradient(to right, #FF2B72, #FFE357);
      font-weight: bold;
      padding: 15px;
      color: rgb(255, 240, 254);
      border: 1px solid transparent;
    }
  }




}
</style>